<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<!--选择模态框-->
<div class="modal fade" id="modal-select">
    <div class="modal-dialog" style="width: 1350px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">外购件在库信息</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <form id="modalForm">
                                <div class="box-header" style="padding-bottom: 0px;">
                                    <div class="row" id="HiddenDiv">
                                        <div class="form-inline">
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    物料分类
                                                </label>
                                                <select id="ityMatTypeQuery" name="ityMatTypeQuery"
                                                        class="form-control">
                                                    <!--<option value="1">外购件</option>-->
                                                    <option value="2">外协件</option>
                                                </select>
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>项目编号</label>
                                                <input type="text" id="ityProCodeQuery" name="ityProCodeQuery"
                                                       class="form-control"
                                                       placeholder="请输入项目编号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>项目信息</label>
                                                <input type="text" id="ityProNameQuery" name="ityProNameQuery"
                                                       class="form-control" placeholder="请输入项目名称或部分名称">
                                            </div>

                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    物料描述
                                                </label>
                                                <input type="text" id="ityMatNameQuery" name="ityMatNameQuery"
                                                       class="form-control" style="width: 180px;" placeholder="请输入物料描述">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>图号</label>
                                                <input type="text" id="ityDrawingCodeQuery" name="ityDrawingCodeQuery"
                                                       class="form-control" style="width: 100px;" placeholder="请输入图号">
                                            </div>
                                            <div class="form-group">
                                                <label>记账日期</label>
                                                <input type="text" class="form-control datepicker" id="startStorageDate"
                                                       name="startStorageDate" readonly="readonly"/>
                                                <span>至</span>
                                                <input type="text" class="form-control datepicker" id="endStorageDate"
                                                       name="endStorageDate" readonly="readonly"/>
                                            </div>

                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <button class="btn btn-success" type="button" id="btn_stockSearch">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="box-body" style="padding-top: 0px;padding-bottom: 0px;">
                                <table id="bootstrap-table1"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-info" id="btn-commit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<!--修改数量单位模态框-->
<div class="modal fade" id="modal-update">
    <div class="modal-dialog" style="width: 750px; height: 600px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改调拨记录</h4>
            </div>
            <div class="modal-body">
                <form id="updateForm" class="form-horizontal" role="form" style="margin-right: 70px">
                    <input type="hidden" id="ardId" name="ardId">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">物料描述</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardMatName" name="ardMatName"
                                   class="form-control" readonly="readonly">
                        </div>
                        <label class="col-sm-2 control-label no-padding-right">SAP编码</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardSapCode" name="ardSapCode"
                                   class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">项目编号</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardProCode" name="ardProCode"
                                   class="form-control" readonly="readonly">
                        </div>
                        <label class="col-sm-2 control-label no-padding-right">项目名称</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardProName" name="ardProName"
                                   class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">跟踪号</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardTrackCode" name="ardTrackCode"
                                   class="form-control" readonly="readonly">
                        </div>
                        <label class="col-sm-2 control-label no-padding-right">单价</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardPrice" name="ardPrice"
                                   class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">数量</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardOutNum" name="ardOutNum"
                                   class="form-control">
                        </div>
                        <label class="col-sm-2 control-label no-padding-right">单位</label>
                        <div class="col-sm-4">
                            <input type="text" id="ardUnit" name="ardUnit"
                                   class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header">
    <h1 style="display: inline-block" id="title">外协件调拨明细</h1>
    <button onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="form-inline">
                            <form id="queryForm">
                                <input id="ardOdrId" name="ardOdrId" type="hidden" th:value="${ardOdrId}">
                                <div class="form-group">
                                    <label>
                                        调拨单号
                                    </label>
                                    <input name="odrCode" type="text" class="form-control text" th:value="${odrCode}" readonly="readonly">
                                </div>
                                <div class="form-group">
                                    <label>
                                        调拨类型
                                    </label>
                                    <select name="odrType" class="form-control" readonly="readonly">
                                        <option th:if="${odrType}==1" value="1">外购件调拨</option>
                                        <option th:if="${odrType}==2" value="2">原材料调拨</option>
                                        <option th:if="${odrType}==3" value="3">外协件调拨</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>
                                        出库仓
                                    </label>
                                    <input name="odrOutWhiId" type="hidden" th:value="${outWarId}">
                                    <input name="odrOutWhiName" type="text" class="form-control text" th:value="${outWarName}" readonly="readonly" />
                                </div>
                                <div class="form-group">
                                    <label>
                                        入库仓
                                    </label>
                                    <input name="odrInWhiId" type="hidden" th:value="${odrInWhiId}">
                                    <input name="odrInWhiName" type="text" class="form-control text" th:value="${inWarName}" readonly="readonly"/>
                                </div>
                                <div class="form-group">
                                    <label>
                                        制单人
                                    </label>
                                    <input name="odrMakePersonId" type="text" class="form-control text" th:value="${odrMakePersonId}" readonly="readonly"/>

                                </div>
                                <div class="form-group">
                                    <label>制单日期</label>
                                    <input type="text" class="form-control datepicker" id="startOdrMakeDate"
                                           name="odrMakeDate" th:value="${odrMakeDate}" disabled="disabled"/>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" class="table table-bordered "  width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;
    /**
     * 加载库存信息
     * */
    function initTable() {

        table1 = js.table.init({
            id: 'bootstrap-table1',
            queryForm: "modalForm",
            url: ctx + "allocationOrder/purInvList",
            scrollY: '500px',
            pageSize: 15,
            clickToSelect: true,
            showExport: false,
            columns: [
                {checkbox: true},
                {
                    title: '序号', field: 'ityId', width: '40',
                    formatter: function (value, row, index) {

                        let pageSize = table1.bootstrapTable('getOptions').pageSize;
                        let pageNumber = table1.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {title: 'SAP物料编码', field: 'itySapCode'},
                {title: '物料描述', field: 'ityMatDesc'},
                {title: '数量', field: 'ityNum'},
                {title: '单位', field: 'ityNumUnit'},
                {title: '单价', field: 'ityPrice'},
                {title: '跟踪号', field: 'ityTrackCode'},
                {title: '项目编号', field: 'ityProCode'},
                {title: '项目名称', field: 'ityProName'},
                {title: '在库类型', field: 'ityStockType',
                    formatter: function (value, row, index) {
                        if(value == 1){
                            return "库存在库"
                        }else if(value == 2){
                            return "项目在库"
                        }else {
                            return value
                        }
                    }},
                {title: '备注', field: 'ityRemark'}
            ]
        });
    }

    /**
     * 修改按钮点击事件
     * */
    function change(index) {
        js.modal.open("modal-update");
        var row = $('#bootstrap-table').bootstrapTable('getData')[index];
        $("#updateForm").fillData(row);
    }

    function del(ardId){
        js.post({
            url: ctx + "allocationOrder/delDetail",
            data: {
                ardId:ardId
            },
            success: function (result) {
                js.modal.success(result.msg);
                js.table.refresh(table);
            }
        })
    }
    /*function opt(val){
        if(val==""){
            $("#typeDiv").hide();
        }else {
            js.post({
                url: ctx + "allocationOrder/findWar",
                data: {
                    odrType: val
                },
                success: function (result) {
                    $("#odrOutWhiId").empty();
                    $("#odrInWhiId").empty();
                    for (var i = 0; i < result.data.outWar.length; i++) {
                        $('#odrOutWhiId').append('<option value="' + result.data.outWar[i].whiId + '">' + result.data.outWar[i].whiName + '</option>');
                    }
                    for (var j = 0; j < result.data.inWar.length; j++) {
                        $('#odrInWhiId').append('<option value="' + result.data.inWar[j].whiId + '">' + result.data.inWar[j].whiName + '</option>');
                    }
                    $("#typeDiv").show();
                }
            })
        }
    }*/

    $(function () {
        //加载列表数据
        table = js.table.init({
            id: 'bootstrap-table',
            url: ctx + "allocationOrder/purInv",
            data:{
                ardOdrId:$("#ardOdrId").val()
            },
            showColumns: true,
            showExport: false,
            pageSize: 300,
            striped: false,
            uniqueId: "ardId",
            columns: [
                {
                    title: '序号', field: 'ardId', width: '40',
                    formatter: function (value, row, index) {

                        let pageSize = table.bootstrapTable('getOptions').pageSize;
                        let pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {title: 'SAP物料编码', field: 'ardSapCode'},
                {title: '物料描述', field: 'ardMatName'},
                {title: '数量', field: 'ardOutNum',visible: false},
                {title: '数量', field: 'ardInNum',
                    formatter: function (value, row, index) {
                        if(value == undefined || value == null){
                            return row.ardOutNum
                        }else {
                            return value
                        }
                    }
                },
                {title: '单位', field: 'ardUnit'},
                {title: '单价', field: 'ardPrice'},
                {title: '跟踪号', field: 'ardTrackCode'},
                {title: '项目编号', field: 'ardProCode'},
                {title: '项目名称', field: 'ardProName'},
                {title: '在库类型', field: 'ardStockType',
                    formatter: function (value, row, index) {
                        if(value==1){
                            return "库存在库"
                        }else if(value==2){
                            return "项目在库"
                        }else {
                            return value
                        }
                    }},
                {title: '备注', field: 'ardSpecialRemark'}
            ]
        });
        /**
         * 表格搜索
         */
        $("#btn_stockSearch").on('click', function () {
            js.table.search(table1);
        });

        /**
         * 点击选择库存
         */
        $("#btn_select_inv").on('click', function () {
            js.modal.open("modal-select");
        });

        // 选择库存模态框确定按钮点击事件
        $("#btn-commit").click(function () {

            var rows = table1.bootstrapTable('getSelections');
            var datas=[];
            for (var i = 0; i < rows.length; i++) {

                rows[i].odrId = $("#ardOdrId").val();
                datas.push(rows[i]);
            }
            js.post({
                url: ctx + "allocationOrder/saveDetail",
                data: JSON.stringify(datas),
                dataType: "json",
                contentType:"application/json",
                success: function (result) {
                    js.table.refresh(table);
                    js.modal.hide("modal-select");
                }
            })
        });

        /**
         * 修改弹出框点击确定
         */
        $("#btn-edit").click(function () {
            if($("#ardOutNum").val() == "" || $("#ardOutNum").val() == 0){
                js.modal.warning("数量不能为空！")
            }
            js.submit({
                url: ctx + "allocationOrder/updateAllocationOrderDetail",
                data: new FormData($("#updateForm")[0]),
                success: function (result) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-update");
                }
            })
        });
        /**
         * 新建弹出框打开事件
         */
        js.modal.openEvent("modal-select", function () {
            initTable();
        });

        js.modal.hideEvent("modal-select", function () {
            js.reset("modalForm");
        });


    });
</script>
</body>
</html>
